<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单查询测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background: #0056b3;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #f9f9f9;
        }
        .error {
            color: red;
        }
        .success {
            color: green;
        }
    </style>
</head>
<body>
    <h1>简单查询测试</h1>
    
    <div class="form-group">
        <label for="pattern">查询号码:</label>
        <input type="text" id="pattern" value="1475846" placeholder="输入号码">
    </div>
    
    <div class="form-group">
        <label for="date">查询日期:</label>
        <input type="text" id="date" value="20250727" placeholder="YYYYMMDD">
    </div>
    
    <button onclick="testQuery()">测试查询</button>
    
    <div id="result" class="result" style="display: none;"></div>

    <script>
        function testQuery() {
            const pattern = document.getElementById('pattern').value;
            const date = document.getElementById('date').value;
            const resultDiv = document.getElementById('result');
            
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = '正在查询...';
            
            fetch('/api/batch_query', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    patterns: [pattern],
                    dates: [date],
                    queryConditions: [{
                        callee: pattern,
                        caller: null,
                        date: date
                    }]
                })
            })
            .then(response => response.json())
            .then(data => {
                console.log('查询结果:', data);
                
                if (data.error) {
                    resultDiv.innerHTML = `<div class="error">错误: ${data.error}</div>`;
                } else if (data.success) {
                    let html = `<div class="success">查询成功！</div>`;
                    html += `<p>总记录数: ${data.total_count}</p>`;
                    html += `<p>查询条件数: ${data.patterns_queried}</p>`;
                    
                    if (data.grouped_results) {
                        html += '<h3>查询结果:</h3>';
                        for (const condition in data.grouped_results) {
                            const group = data.grouped_results[condition];
                            html += `<p><strong>${condition}</strong>: ${group.count} 条记录</p>`;
                            
                            if (group.data && group.data.length > 0) {
                                html += '<table border="1" style="width: 100%; margin-top: 10px;">';
                                html += '<tr><th>ID</th><th>主叫</th><th>被叫</th><th>开始时间</th></tr>';
                                
                                group.data.slice(0, 5).forEach(row => {
                                    html += `<tr>
                                        <td>${row.id || ''}</td>
                                        <td>${row.calleraccesse164 || ''}</td>
                                        <td>${row.calleeaccesse164 || ''}</td>
                                        <td>${row.starttime_beijing || ''}</td>
                                    </tr>`;
                                });
                                
                                if (group.data.length > 5) {
                                    html += `<tr><td colspan="4">... 还有 ${group.data.length - 5} 条记录</td></tr>`;
                                }
                                
                                html += '</table>';
                            }
                        }
                    }
                    
                    if (data.errors && data.errors.length > 0) {
                        html += `<div class="error"><h3>错误信息:</h3><ul>`;
                        data.errors.forEach(error => {
                            html += `<li>${error}</li>`;
                        });
                        html += '</ul></div>';
                    }
                    
                    resultDiv.innerHTML = html;
                } else {
                    resultDiv.innerHTML = '<div class="error">查询失败</div>';
                }
            })
            .catch(error => {
                console.error('查询错误:', error);
                resultDiv.innerHTML = `<div class="error">网络错误: ${error.message}</div>`;
            });
        }
    </script>
</body>
</html> 